<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

  <body>
    <div id="app"></div>
  </body>
  <script>
    let { reactive, watch, watchEffect } = VueRuntimeDOM;
    let state = reactive({ user: "hl", flag: true });
    watch(
      () => state.user,
      (newValue, oldValue) => {
        console.log("watch", newValue, oldValue);
      },
      {
        immediate: true,
      }
    );

    watchEffect(() => {
      console.log("watchEffect", state.user);
    });
    setTimeout(() => {
      state.user = "hu.lei";
      state.user = "hu.lei1";
    }, 3000);
  </script>
</html>
